<template>
<el-container>
	<el-aside width="220px">
		<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="groupClick">
		</el-tree>
	</el-aside>
	<el-container>
		<el-main class="nopadding">
			<el-container>
				<el-header>
					<div class="left-panel">
						<el-date-picker v-model="search.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" @change="upsearch" />
					</div>
					<div class="right-panel">
						<el-button type="danger" @click="batch_delete">删除</el-button>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
						<el-table-column label="级别" prop="code" width="60">
							<template #default="scope">
								<el-icon v-if="scope.row.code=='500'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
								<el-icon v-if="scope.row.code!='200' && scope.row.code!='500'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
								<el-icon v-if="scope.row.code=='200'" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
							</template>
						</el-table-column>
						<el-table-column label="ID" prop="id" width="100"></el-table-column>
						<el-table-column label="日志名" prop="title" width="150"></el-table-column>
						<el-table-column label="请求接口" prop="url" width="220"></el-table-column>
						<el-table-column label="请求方法" prop="method" width="150"></el-table-column>
						<el-table-column label="用户" prop="nickname" width="150">
							<template #default="scope">
								{{ scope.row.user?.nickname }}
							</template>
						</el-table-column>
						<el-table-column label="客户端IP" prop="client_ip" width="220"></el-table-column>
						<el-table-column label="日志时间" prop="created_at" width="170"></el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-main>
	</el-container>
</el-container>

<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
	<info ref="info"></info>
</el-drawer>
</template>

<script>
import info from './info'

export default {
	name: 'system.log',
	components: {
		info
	},
	data() {
		return {
			infoDrawer: false,
			category: [
				{
					label: '系统日志',
					children: [
						{label: 'GET', name: 'get'},
						{label: 'POST', name: 'post'},
						{label: 'DELETE', name: 'delete'},
						{label: 'PUT', name: 'put'}
					]
				}
				// ,{
				// 	label: '应用日志',
				// 	children: [
				// 		{label: 'selfHelp'},
				// 		{label: 'WechatApp'}
				// 	]
				// }
			],
			apiObj: this.$API.system.log.list,
			search: {
				keyword: ""
			}
		}
	},
	methods: {
		upsearch(){
			this.$refs.table.reload(this.search)
		},
		rowClick(row){
			this.infoDrawer = true
			this.$nextTick(() => {
				this.$refs.info.setData(row)
			})
		},
		groupClick(data){
			this.search.method = data.name || 0
			this.$refs.table.reload(this.search)
		},
		async batch_delete(){
			if(!this.search.date.length){
				this.$message.error("请选择日期")
				return
			}
			var res = await this.$API.system.log.delete.post(this.search)
			if(res.code == 1){
				this.$message.success("删除成功")
				this.upsearch()
			}else{
				this.$message.error(res.message)
			}
		}
	}
}
</script>
